<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .little_sister_box {
        width: 100px;
        height: 500px;
        display: flex;
    }

    .part1 {
        flex: 1;
    }

    .font_hao {

        color: pink;
        font-style: italic;
    }

    /* 添加一些基本样式，使按钮看起来更好看 */
    body {
        
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: #3498db;
        color: #fff;
        border: none;
        border-radius: 5px;
        outline: none;
    }

    button:hover {
        background-color: #2980b9;
    }


    select {
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        outline: none;
    }

    option {
        font-size: 16px;
    }
</style>

<body>

    <div>
        <img src="/static/1.webp" style="width: 200px">
        <img src="/static/2.webp" style="width: 200px">
        <img src="/static/3.webp" style="width: 200px">
        <img src="/static/4.png" style="height: 268px">
        <img src="/static/5.webp" style="width: 200px">
        <img src="/static/6.webp" style="width: 200px">
    </div>
    <h1 class="font_hao"> 佳豪这是你的爱吗？</h1>
    <div>
        <!-- <button>选择</button> -->
        <label for="choices">请选择：</label>
        <select id="choices" onchange="choose_deal()">
          <option value="123"></option>
          <option value="yes">是</option>
          <option value="no">否</option>
        </select>
      </div>
    
      <div id="imageContainer">
        <!-- 这里将显示渲染的图片 -->
      </div>
    
      <script>
        function choose_deal() {
          var choose1 = document.getElementById("choices");
          var imageContainer = document.getElementById("imageContainer");
    
          // 清空图片容器
          imageContainer.innerHTML = "";
    
          if (choose1.value === 'yes') {
            // 如果选择了是，渲染第一张图片
            var image1 = document.createElement("img");
            var image3 = document.createElement("img");
            image1.src = "/static/haha.png";
            image3.src = "/static/tian1.webp";
            imageContainer.appendChild(image3);
            imageContainer.appendChild(image1);
            console.log('是');
          } else if (choose1.value === 'no') {
            // 如果选择了否，渲染第二张图片
            var image2 = document.createElement("img");
            image2.src = "/static/giao1.webp";
            imageContainer.appendChild(image2);
            console.log('否');
          }
        }
      </script>
    <!-- <div class="little_sister_box">
        <img class="part1" src="/static/1.webp">
        <img class="part1" src="/static/2.webp">
    </div>
    <div class="little_sister_box">
        <img class="part1" src="/static/3.webp">
        <img class="part1" src="/static/4.png">
    </div>
    <div class="little_sister_box">
        <img class="part1" src="/static/5.webp">
        <img class="part1" src="/static/6.webp">
    </div> -->




</body>

</html>